﻿@{
    ViewBag.Title = "DragAndDrop";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Drag And Drop</h2>

<canvas id="testCanvas" width="800" height="600" style="border: #008000 solid 1px"></canvas>

<script type="text/javascript">
    var stage;

    function init(){
        stage = new createjs.Stage(document.getElementById('testCanvas'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        start();
    }

    function handleTick(e){
        stage.update();
    }

    function start(){
        var circle = new createjs.Shape();
        circle.graphics.beginFill('#0000FF').drawCircle(0,0,50);
        circle.x = stage.canvas.width / 2;
        circle.y = stage.canvas.height / 2;

        circle.addEventListener('mousedown',function(e){
            stage.addEventListener('stagemousemove',function(e){
                circle.x = stage.mouseX;
                circle.y = stage.mouseY;
            });
            stage.addEventListener('stagemouseup',function(e){
                e.target.removeAllEventListeners();
            });
        });

        stage.addChild(circle);
    }

    window.onload = function () {
        init();
    }
</script>
